<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="title" />

    <!-- 列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.art_id"
        :title="item.title"
        @click="$router.push(`/article?id=${item.art_id}`)"
      />
    </van-list>
  </div>
</template>

<script>
// 导入接口
import { searchAPI } from "@/api/search";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    async onLoad() {
      const res = await searchAPI({
        page: this.page,
        q: this.$route.query.key,
      });

      // 查完第一页就要查第二页，查完第二页就要查第三页，查完第三页就要查第四页
      // 所以相当于每次查完，让页码+1
      this.page++;
      // 如果用赋值会覆盖list
      this.list.push(...res.data.results);

      // 本次加载完了
      this.loading = false;

      // 判断是否全部加载完
      if (this.list.length >= res.data.total_count) {
        this.finished = true;
      }
    },
  },

  computed: {
    title() {
      return this.$route.query.key + " 的搜索结果";
    },
  },

  watch: {
    // 深度侦听路由参数的变化
    $route: {
      deep: true,
      handler() {
        // 计算属性也有侦听的作用，因为它会侦听依赖项有没有变化
        // 而现在依赖项就是网址上的参数，所以咱们可以直接写在这里
        this.finished = false;
        this.list = [];
        this.page = 1; // 从第一页开始
        // 手动调用一次onLoad
        this.onLoad();
      },
    },
  },
};
</script>

<style>
</style>